<template>
    <div class="main_category">
        <div class="link_category">
            <router-link to="/goHome/{username}" style="text-decoration: none;font-size: 20px;">回到首页</router-link>
        </div>
        <el-card class="card_category">
            <el-table class="category" :data="category" >
                <el-table-column prop="categoryId" label="categoryId">
                    <div class="item" slot-scope="scope">
                        <div>{{scope.row.categoryId}}</div>
                    </div>
                </el-table-column>
                <el-table-column prop="description" label="description">
                    <div class="item" slot-scope="scope">
                        <div>{{scope.row.description}}</div>
                    </div>
                </el-table-column>
                <el-table-column prop="name" label="name" >
                    <div class="item" slot-scope="scope">
                        <el-input class="item__input" v-model="scope.row.name" placeholder="请输入内容"/>
                    </div>
                </el-table-column>
                <el-table-column label="查看商品" >
                    <template slot-scope="scope">
		                <router-link :to="{name:'Product', params:{id:scope.row.categoryId}}">
		                    <el-button type="info">详情</el-button>
		                </router-link>
	                </template>
                </el-table-column>
                <el-table-column label="修改商品种类" >
                    <template  slot-scope="scope">
		                <el-button @click="updateCategory(scope.row)" type="primary">
		                    <span>修改信息</span>
		                </el-button>
	                </template>
                </el-table-column>
                <el-table-column label="删除商品种类" >
                    <template slot-scope="scope">
		                <el-button @click="deleteCategory(scope.row.categoryId)" type="danger">
		                    <span>删除</span>
		                </el-button>
	                </template>
                </el-table-column>
            </el-table>
        </el-card>
        <div class="add_btn">
            <el-button @click="add=>{this.$router.push({name:'Add' , params:{type:this.type}})}" type="primary">添加商品</el-button>
        </div>
    </div>
</template>

<script>
import axios from 'axios'
import { jwtDecode } from 'jwt-decode';
export default {
    name:'Category',
    data(){
        return {
            token : localStorage.getItem('token'),
            username:jwtDecode(localStorage.getItem('token')).username,
            category : '',
            type:   'category',
        }
    },
    methods : {
        //使用结构赋值进行错误处理
        promise_error_process(promise){
            return promise.then(result=>[null,result])
                           .catch(err=>[err,null])
        },
        async getCategoryByAjax(){
            const response = await axios({
                url :  'http://localhost:8081/categories',
                method : 'GET',
                withCredentials : true,
                headers :{
                    'Authorization': this.token // 将token放在请求头中
                }
            })
            return response
        },
        async getCategory(){
            const [err,result] = await this.promise_error_process(this.getCategoryByAjax())
            if(err){
                console.log('请求错误')
            }else{
                console.log(result.data.data)
                this.category = result.data.data
            }
        },
        async updateByAjax(category_one){
            const response = await axios({
                url :  'http://localhost:8081/categories',
                method : 'PUT',
                withCredentials : true,
                headers :{
                    'Content-Type' : 'application/json',
                    'Authorization': this.token // 将token放在请求头中
                },
                data : category_one
            })
            return response
        },
        async updateCategory(category_one){
            const [err,result] = await this.promise_error_process(this.updateByAjax(category_one))
            if(err){
                console.log('请求错误')
            }else{
                console.log(result)
            }
        },
        async deleteByAjax(id){
            const response = await axios({
                url :  `http://localhost:8081/categories/${id}`,
                method : 'DELETE',
                withCredentials : true,
                headers :{
                    'Authorization': this.token // 将token放在请求头中
                },
            })
            return response
        },
        async deleteCategory(id){
            console.log(id)
            const [err,result] = await this.promise_error_process(this.deleteByAjax(id))
            if(err){
                console.log('请求错误')
            }else{
                console.log(result)
                this.category = this.category.filter(item => item.categoryId != id)
            }
        }
    },
    created(){
        this.getCategory() 
    }
}
</script>

<style scoped>
.main_category{
    text-align: center;
}
.link_category{
    text-align: left;
    padding-left: 16%;
    padding-top: 20px;
}
.card_category{
    width: 70%;
    margin-left: 15%;
    margin-top: 20px;
    padding: 30px;
}

.add_btn{
    text-align: right;
    margin-right: 15%;
    padding: 30px;
}
</style>